<template>
  <div id="md-shared-header-mobile-component">
    <div class="header-mobile-container">
      <div class="header-menu-icon">
        <i :class="[!sidebarToggle?'md-icon-hang':'md-icon-close']" @click="handleSidebarToggle()"></i>
      </div>
      <div class="header-mobile-logo">
        {{logoText}}
      </div>
      <ul>
        <li>
          <el-popover ref="headerNavsPopover" placement="bottom" trigger="click" popper-class="header-navs-popover">
            <div>
              <ul>
                <li class="header-navs-icon" v-for="item in headerMenus.filter(e=>e.type===2)" :key="item.value" @click="handleMenuClick(item);">
                  <i :class="item.icon" :title="item.label"></i>{{item.label}}
                </li>
              </ul>
            </div>
            <span class="header-navs-dropdown" slot="reference">
              <el-avatar :size="30" :src="user.avatar"></el-avatar>
              {{user.nickName}}
            </span>
          </el-popover>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdSharedHeaderMobileComponent',
  props: ['user'],
  data () {
    return {}
  },
  computed: {
    sidebarToggle () {
      return this.$store.state.mdShared.sidebarToggle
    },
    logoText () {
      return this.$store.state.mdShared.logoText
    },
    headerMenus () {
      return this.$store.state.mdShared.headerMenus
    },
  },
  methods: {
    handleSidebarToggle () {
      this.$store.state.mdShared.sidebarToggle = !this.sidebarToggle
    },
    async handleMenuClick (item) {
      if (item.value !== 8 && item.path) {
        // 隐藏左侧菜单
        this.$store.state.mdShared.sidebarToggle = false
        // 隐藏下拉菜单
        this.$refs.headerNavsPopover.doClose()
        this.$router.push(item.path)
        return
      }

      if (item.value === 8) {
        try {
          await this.$confirm('确认要退出登录吗？')

          this.$local.clear()

          window.location.href = '/login'
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
#md-shared-header-mobile-component {
  width: 100%;
  height: @md-shared-header-height;
  line-height: @md-shared-header-height;
  background-color: @md-shared-header-bg;
  box-sizing: border-box;
  display: none;
  padding: 0px 15px;

  .header-mobile-container {
    display: flex;
    align-items: center;
    .header-menu-icon {
      width: 82px;
      .md-icon-hang {
        .md-icon-hang(#fff, 2px, 20px, 15px);
      }
      .md-icon-close {
        .md-icon-close(25px, 2px);
      }
    }

    .header-mobile-logo {
      flex: 1;
      text-align: center;
      font-size: 25px;
      font-weight: bold;
      color: @md-shared-header-color;
    }
    ul {
      padding: 0px;
      margin: 0px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      li {
        .header-navs-dropdown {
          display: flex;
          align-items: center;
          cursor: pointer;
          color: @md-shared-header-color;
          font-size: 15px;
          .el-avatar {
            margin-right: 10px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  #md-shared-header-mobile-component {
    display: block;
  }
}
</style>